<template>
  <div class="layout">
    <el-container class="all">
      <el-header style="background-color: #687179;line-height: 60px;">
        <span class="title" style="font-size: 20px; margin: auto 15px; color: white;font-weight: 800;">中集宝伟</span>
        <el-dropdown style="font-size: 18px; float: right; margin-right: 15px; color: white ;line-height: 60px"
          trigger="click">
          <span class="el-dropdown-link">欢迎您：{{ user.username }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>
                <div @click="changePass">修改密码</div>
              </el-dropdown-item>
              <el-dropdown-item>
                <div @click="logout">退出登录</div>
              </el-dropdown-item>
            </el-dropdown-menu>
            <el-dialog></el-dialog>
          </template>
        </el-dropdown>
      </el-header>
      <el-container class="main">
        <el-aside width="200px">
          <el-menu :default-active="$route.path" router background-color="#545c64" text-color="#fff"
            active-text-color="#ffd04b">
            <el-menu-item index="list">
              <i class="el-icon-s-home"></i>
              <span slot="title">申请清单</span>
            </el-menu-item>
            <el-menu-item index="invoiced" v-if="user.department == '财务部'">
              <i class="el-icon-s-home"></i>
              <span slot="title">待开票列表</span>
            </el-menu-item>
            <el-menu-item index="examine" v-if="user.department == '财务部' && user.remark == '管理员'">
              <i class="el-icon-s-home"></i>
              <span slot="title">待审核列表</span>
            </el-menu-item>
            <el-menu-item index="dryBox" v-if="user.department == '财务部'">
              <i class="el-icon-s-home"></i>
              <span slot="title">开票列表（干箱）</span>
            </el-menu-item>
            <el-menu-item index="parts" v-if="user.department == '财务部'">
              <i class="el-icon-s-home"></i>
              <span slot="title">开票列表（零部件）</span>
            </el-menu-item>
            <el-menu-item index="domesticSales" v-if="user.department == '财务部'">
              <i class="el-icon-s-home"></i>
              <span slot="title">开票列表（内销）</span>
            </el-menu-item>
            <el-menu-item index="time" v-if="user.department == '财务部'">
              <i class="el-icon-s-home"></i>
              <span slot="title">时间统计报表</span>
            </el-menu-item>
            <el-menu-item index="customer" v-if="user.department == '财务部'">
              <i class="el-icon-s-home"></i>
              <span slot="title">客户管理</span>
            </el-menu-item>
            <el-menu-item index="user" v-if="user.department == '财务部'">
              <i class="el-icon-s-home"></i>
              <span slot="title">用户管理</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
    <el-dialog v-model="dialogVisible" title="修改密码" width="30%" :before-close="handleClose"
      :close-on-click-modal="false">
      <el-form label-width="auto" :rules="passrules" :model="changepass" ref="passchange">
        <el-form-item label="请输入旧密码" prop="oldPassword">
          <el-input v-model="changepass.oldPassword" show-password></el-input>
        </el-form-item>
        <el-form-item label="请输入新密码" prop="newPassword">
          <el-input v-model="changepass.newPassword" show-password></el-input>
        </el-form-item>
        <el-form-item label="请重复输入新密码" prop="repass">
          <el-input v-model="changepass.repass" show-password></el-input>
        </el-form-item>
      </el-form>
      <div class="footer">
        <el-button @click="cancel">取消</el-button>
        <el-button @click="confirm(passchange)">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, reactive, inject, onMounted, provide, defineEmits } from 'vue'
import { changeUserPass } from '@/utils/invoice'
import { useRouter } from "vue-router";
const router = useRouter();
const user = ref(localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {})
const dialogVisible = ref(false)
const passchange = ref()
const changepass = ref({
  newPassword: '',
  repass: '',
  oldPassword: ''
})
const passrules = reactive(
  {
    oldPassword: [
      { required: true, message: '请填写密码', trigger: 'blur' },
    ],
    newPassword: [
      { required: true, message: '请填写密码', trigger: 'blur' },
    ],
    repass: [
      { required: true, message: '请填写重复密码', trigger: 'blur' },
      { validator: repeat, trigger: "blur" }
    ],
  }
)
function repeat(rule, value, callback) {
  if (changepass.value.newPassword != changepass.value.repass) {
    callback(new Error("两次密码输入不一致"))
  } else {
    callback()
  }
}
function changePass() {
  dialogVisible.value = true
}
function logout() {
  localStorage.removeItem("user")
  localStorage.removeItem("token")
  localStorage.removeItem("name")
  localStorage.removeItem("time")
  router.push({
    path: '/login'
  })
}
function cancel() {
  changepass.value = {}
  dialogVisible.value = false
}
function confirm(passchange) {
  passchange.validate((valid, fileds) => {
    if (valid) {
      changeUserPass(changepass.value, user.value.id).then(res => {
        console.log(res);
        changepass.value = {}
        dialogVisible.value = false
      })
    }
  })
}
</script>

<style scoped lang="scss">
.el-menu {
  border-right: none !important;
}

.layout {
  height: 100%;

  .all {
    height: 100%;
  }

  .main {
    height: 100%;

    .el-menu {
      height: 100%;
    }
  }
}

.footer {
  display: flex;
  justify-content: flex-end;
}
</style>